<template>
  <Card title="通话记录" line :class="$style.wrap">
    <template v-slot:right>
      <Button type="primary" @click="toTelRecordHandle">查询</Button>
    </template>
    <div>
      <table-box
        ref="telRecordTable"
        no-request
        :other-filters="otherFilters"
        :table-config="tableConfig"
        :table-height="140"
      />
    </div>
  </Card>
</template>
<script>
import Card from '@/components/Card'
// import { putCreate } from '@/api/telRecord'
import { filtersRaw } from '@/utils'
export default {
  name: 'DisplyTelRecord',
  components: {
    Card
  },
  props: {
    callTel: {
      type: String,
      default: ''
    },
    callid: {
      type: String,
      default: ''
    },
    recordId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 额外查询字段
      otherFilters: [],
      tableConfig: {
        interfacePath: '/call-center/api/v1/callLog/page',
        pageFlag: true,
        hideFuncBar: true,
        pageSize: 5,
        tablePage: [5, 10, 20, 30, 50, 100],
        tabIndex: 2,
        sort: 'callDate',
        order: 'desc'
      },
      // 表格字段动态配置
      // 客户管理部和电商运营部
      clientSetting: [
        {
          label: '序号',
          minWidth: '80',
          formatData: (v) => v.keyIndex + 1,
          align: 'center'
        },
        {
          prop: 'callCode',
          minWidth: '120',
          label: '通话记录编号',
          render: (_, row) => {
            return (
              <Button type='text' onClick={this.toTelRecord.bind(this, row)}>
                {row.callCode}
              </Button>
            )
          }
        },
        {
          prop: 'customerName',
          minWidth: '100',
          label: '客户姓名'
        },
        {
          prop: 'callType',
          minWidth: '100',
          label: '呼叫类型',
          propEnum: {
            appCode: 'call-center',
            domainCode: 'marketing',
            dictTypeCode: 'CALL_TYPE'
          }
        },
        {
          prop: 'transfer',
          minWidth: '100',
          label: '转接类型',
          formatData: v => {
            let t = v.transfer
            if (t === undefined || t.toString() === '' || t.toString() === '0') return '未转接'
            t = t.toString()
            if (t === '1') return '转出'
            if (t === '2') return '转入'
          }
        },
        {
          prop: 'callTopic',
          minWidth: '100',
          label: '外呼事宜',
          propEnum: {
            appCode: 'call-center',
            domainCode: 'marketing',
            dictTypeCode: 'OUTBOUND_MATTERS'
          }
        },
        {
          prop: 'workOrderNo',
          minWidth: '160',
          label: '工单编号',
          render: (_, row) => {
            return (
              <Button type='text' onClick={this.toWorkOrder.bind(this, row)}>
                {row.workOrderNo}
              </Button>
            )
          }
        },
        {
          prop: 'businessType1Name',
          minWidth: '130',
          label: '一级业务类型'
        },
        {
          prop: 'businessType2Name',
          minWidth: '130',
          label: '二级业务类型'
        },
        {
          prop: 'workOrderState',
          minWidth: '100',
          label: '工单状态',
          propEnum: {
            appCode: 'call-center',
            domainCode: 'marketing',
            dictTypeCode: 'WORK_ORDER_STATUS'
          }
        },
        {
          prop: 'callDate',
          minWidth: '130',
          label: '通话时间'
        },
        {
          prop: 'callerName',
          minWidth: '100',
          label: '坐席姓名',
          formatData: v => {
            let str = `${v.callerName}(${v.createBy})`
            if (v.callerPlatformNo) {
              str += ` - ${v.callerPlatformNo}`
            }
            return str
          }
        },
        {
          prop: 'satisfaction',
          minWidth: '100',
          label: '满意度',
          propEnum: {
            appCode: 'call-center',
            domainCode: 'marketing',
            dictTypeCode: 'SATISFACTION'
          },
          align: 'center'
        }
      ],
      // 销售二部
      saleSetting: [
        {
          label: '序号',
          minWidth: '80',
          formatData: (v) => v.keyIndex + 1,
          align: 'center'
        },
        {
          prop: 'callCode',
          minWidth: '120',
          label: '通话记录编号',
          render: (_, row) => {
            return (
              <Button type='text' onClick={this.toTelRecord.bind(this, row)}>
                {row.callCode}
              </Button>
            )
          }
        },
        {
          prop: 'crmCustomerCode',
          minWidth: 120,
          label: '客户编码'
        },
        {
          prop: 'callType',
          minWidth: '100',
          label: '呼叫类型',
          propEnum: {
            appCode: 'call-center',
            domainCode: 'marketing',
            dictTypeCode: 'CALL_TYPE'
          }
        },
        {
          prop: 'callDate',
          minWidth: 140,
          label: '通话时间'
        },
        {
          prop: 'callerName',
          minWidth: '100',
          label: '坐席姓名',
          formatData: v => {
            let str = `${v.callerName}(${v.createBy})`
            if (v.callerPlatformNo) {
              str += ` - ${v.callerPlatformNo}`
            }
            return str
          }
        },
        {
          prop: 'groupName',
          minWidth: 120,
          label: '坐席业务组'
        },
        // {
        //   prop: 'customerName',
        //   minWidth: '100',
        //   label: '客户姓名'
        // },
        // {
        //   prop: 'transfer',
        //   minWidth: '100',
        //   label: '转接类型',
        //   formatData: v => {
        //     let t = v.transfer
        //     if (t === undefined || t.toString() === '') return '未转接'
        //     t = t.toString()
        //     if (t === '1') return '转出'
        //     if (t === '2') return '转入'
        //   }
        // },
        // {
        //   prop: 'crmCustomerCode',
        //   minWidth: '100',
        //   label: '客户编码'
        //   render: (_, row) => {
        //    return <Button type='text'>{row.crmCustomerCode}</Button>
        //   }
        // },
        // {
        //   prop: 'crmCallObject',
        //   minWidth: '100',
        //   label: '通话对象',
        //   propEnum: {
        //     appCode: 'call-center',
        //     domainCode: 'marketing',
        //     dictTypeCode: 'CALLING_OBJECT'
        //   }
        // },
        {
          prop: 'satisfaction',
          minWidth: '100',
          label: '满意度',
          propEnum: {
            appCode: 'call-center',
            domainCode: 'marketing',
            dictTypeCode: 'SATISFACTION'
          },
          align: 'center'
        }
      ],
      // 财务部
      financeSetting: [
        {
          label: '序号',
          minWidth: '80',
          formatData: (v) => v.keyIndex + 1,
          align: 'center'
        },
        {
          prop: 'callCode',
          minWidth: '120',
          label: '通话记录编号',
          render: (_, row) => {
            return (
              <Button type='text' onClick={this.toTelRecord.bind(this, row)}>
                {row.callCode}
              </Button>
            )
          }
        },
        {
          prop: 'customerName',
          minWidth: '100',
          label: '客户姓名'
        },
        {
          prop: 'callType',
          minWidth: '100',
          label: '呼叫类型',
          propEnum: {
            appCode: 'call-center',
            domainCode: 'marketing',
            dictTypeCode: 'CALL_TYPE'
          }
        },
        {
          prop: 'transfer',
          minWidth: '100',
          label: '转接类型',
          formatData: v => {
            let t = v.transfer
            if (t === undefined || t.toString() === '' || t.toString() === '0') return '未转接'
            t = t.toString()
            if (t === '1') return '转出'
            if (t === '2') return '转入'
          }
        },
        {
          prop: 'sapCode',
          minWidth: '100',
          label: 'SAP编码'
        },
        {
          prop: 'bpmCode',
          minWidth: '100',
          label: 'BPM编码'
        },
        {
          prop: 'callDate',
          minWidth: '130',
          label: '通话时间'
        },
        {
          prop: 'callerName',
          minWidth: '100',
          label: '坐席姓名',
          formatData: v => {
            let str = `${v.callerName}(${v.createBy})`
            if (v.callerPlatformNo) {
              str += ` - ${v.callerPlatformNo}`
            }
            return str
          }
        }
      ]
    }
  },
  mounted() {
    this.initData()
  },
  created() {
    // 根据部门设置setting
    this.initSetting()
  },
  methods: {
    // 通话记录额外查询数据生成
    initData() {
      if (!this.callTel) return
      const otherFilters = [
        filtersRaw('customerPhone', this.callTel, '=')
      ]
      if (this.$isClient()) {
        otherFilters.push(
          filtersRaw('department', this.$client, '=')
        )
      }
      if (this.$isShop()) {
        otherFilters.push(
          filtersRaw('department', this.$shop, '=')
        )
      }
      if (this.$isCustomerCare()) {
        otherFilters.push(
          filtersRaw('department', this.$customerCare, '=')
        )
      }
      // 查询所有该来电号码的通话记录，不分部门
      // if (this.$isSale()) {
      //   otherFilters.push(
      //     filtersRaw('department', this.$sale, '=')
      //   )
      // }
      if (this.$isFinance()) {
        otherFilters.push(
          filtersRaw('department', this.$finance, '=')
        )
      }
      this.otherFilters = otherFilters
      this.$nextTick(() => {
        this.$refs.telRecordTable.initTableData()
      })
    },
    updateData() {
      this.initData()
    },
    // 跳转到通话记录
    toTelRecordHandle() {
      const query = {}
      if (this.callTel) {
        query.callTel = this.callTel
      }
      this.$router.push({ name: 'TelRecord', query })
    },
    // 跳转到单个通话记录
    toTelRecord(row) {
      this.$router.push({ name: 'TelRecord', query: { callCode: row.callCode }})
    },
    // 跳转到工单
    toWorkOrder(row) {
      if (row.workOrderNo) {
        let name = 'DisposeOrderDetails'
        const state = row.workOrderState
        const query = { workOrderNo: row.workOrderNo, form: 'telRecord', state }
        // 客管部跳转到详情
        if (state === 0 || state === '0') {
          name = 'CreateOrder'
          query.type = 'edit'
        }
        this.$router.push({ name, query })
      }
    },
    // 根据部门出事话setting
    // client-客户管理部，finance-销售财务，shop-运营，sale-销售二部
    initSetting() {
      if (this.$isClient()) {
        this.tableConfig.tabIndex = 12
        this.$set(this.tableConfig, 'setting', this.clientSetting)
      } else if (this.$isFinance()) {
        this.tableConfig.tabIndex = 13
        this.$set(this.tableConfig, 'setting', this.financeSetting)
      } else if (this.$isShop() || this.$isCustomerCare()) {
        this.tableConfig.tabIndex = 14
        this.$set(this.tableConfig, 'setting', this.clientSetting)
      } else if (this.$isSale()) {
        this.tableConfig.tabIndex = 15
        this.$set(this.tableConfig, 'setting', this.saleSetting)
      }
      // switch (this.dep) {
      //   case 'client':
      //     this.$set(this.tableConfig, 'setting', this.clientSetting)
      //     break
      //   case 'finance':
      //     this.$set(this.tableConfig, 'setting', this.financeSetting)
      //     break
      //   case 'shop':
      //     this.$set(this.tableConfig, 'setting', this.clientSetting)
      //     break
      //   case 'sale':
      //     this.$set(this.tableConfig, 'setting', this.saleSetting)
      //     break
      // }
    }
  }
}
</script>
<style lang='scss' module>
.wrap {
  div[class*="pagination-container"]{
    margin-bottom: 0 !important;
  }
}
</style>
